<template>
  <div class="app">
    <el-dialog
      title="编辑商品"
      :visible.sync="appear"
      width="800px"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名">
          <el-input v-model="form.storename" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属店铺">
              <el-select v-model="form.storeblone" placeholder="请选择所属店铺">
                <el-option
                  v-for="item in storelist"
                  :key="item.id"
                  :label="item.storeblone"
                  :value="item.storeblone"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型">
              <el-select v-model="form.storetype" placeholder="请选择商品类型">
                <el-option
                  v-for="item in goodslist"
                  :key="item.id"
                  :label="item.storetype"
                  :value="item.storetype"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="添加图片">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.storedescribe" type="textarea" :rows="4" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="成本价">
              <el-input v-model="form.costprice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原价">
              <el-input v-model="form.originalcost" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售价">
              <el-input v-model="form.saleprice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="促销价">
              <el-input v-model="form.promotionprice" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="库存量">
          <el-input v-model="form.stock" />
        </el-form-item>
        <el-form-item label="参与活动">
          <el-checkbox-group v-model="form.activity">
            <el-checkbox label="美食/餐厅线上活动" />
            <el-checkbox label="地推活动" />
            <el-checkbox label="线下主题活动" />
            <el-checkbox label="单纯品牌曝光" />
          </el-checkbox-group>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否为热销商品">
              <el-radio-group v-model="form.salelike">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否推荐该商品">
              <el-radio-group v-model="form.recommend">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item></el-col>
        </el-row>
        <el-form-item label="商品状态">
          <el-radio-group v-model="form.state">
            <el-radio label="上架" />
            <el-radio label="下架" />
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="$emit('update:appear',false)">取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getShoplist4, getShoplist5, increase } from '@/api/getShoplist';
export default {
  name: 'Newgoods',
  props: {
    appear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      goodslist: [], // 商品分类列表
      storelist: [], // 商铺列表
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // 表单数据
      form: {
        storename: '', // 商品名
        storeblone: '', // 所属店铺
        storetype: '', // 类型
        storedescribe: '', // 商品描述
        costprice: '', // 成本价
        originalcost: '', // 原价
        saleprice: '', // 销售价
        promotionprice: '', // 促销价
        stock: '', // 库存量
        activity: [], // 参与活动
        salelike: '', // 是否热销（是 或 否）
        recommend: '', // 是否推荐（是 或 否）
        state: '', // 状态（上架 或 下架）
        goodsimage: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
        goodsparticulars: {
          image1: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
          image2: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
          image3: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
          image4: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
          image5: ' https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=135896716,3704103640&fm=26&gp=0.jpg',
        },
      },
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // 请求数据
    async getdata() {
      // 请求分类列表数据
      const data = await getShoplist4();
      this.goodslist = data.data;
      // 请求获取商铺列表数据
      const datas = await getShoplist5();
      this.storelist = datas.data;
    },
    // 新增商品事件
    async onSubmit() {
      console.log('submit!');
      const data = await increase(this.form);
      console.log(data);
      this.$emit('update:appear', false);
    },
    // 图片事件
    async handleRemove(file) {
      console.log(file);
    },
    async handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-button{
    float: right;
    margin-right: 20px;
}
</style>
